<template>
  <view class="container">
    <view class="card">
      <view class="logo-container">
        <image class="logo" src="/static/log.png" mode=""></image>
      </view>
      
      <text class="title">功能使用提示</text>
      
      <text class="content">
        该功能需要后台服务部署才能正常使用。
      </text>
      
      <view class="contact-info">
        <text class="contact-text">如需技术帮助或部署支持，请联系：</text>
        <text class="phone-number" @tap="makePhoneCall">15130638952</text>
      </view>
    </view>
    
    <view class="footer">
      <text class="beian-text">冀ICP备16009060号-4A</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 可以在这里添加响应式数据
    }
  },
  methods: {
    makePhoneCall() {
      // 在UniApp中拨打电话
      uni.makePhoneCall({
        phoneNumber: '15130638952'
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  background-color: #f5f7fa;
  
  .card {
    background: white;
    border-radius: 24rpx;
    box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.08);
    padding: 60rpx 40rpx;
    width: 100%;
    max-width: 600rpx;
    text-align: center;
    margin-bottom: 40rpx;
    
    .logo-container {
      margin-bottom: 50rpx;
      
      .logo {
        width: 160rpx;
        height: 160rpx;
        // background: linear-gradient(135deg, #4a6cf7 0%, #6a11cb 100%);
        border-radius: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        color: white;
        font-size: 64rpx;
        font-weight: bold;
      }
    }
    
    .title {
      font-size: 44rpx;
      font-weight: 600;
      margin-bottom: 30rpx;
      color: #2d3748;
      display: block;
    }
    
    .content {
      font-size: 32rpx;
      color: #4a5568;
      margin-bottom: 50rpx;
      display: block;
      line-height: 1.6;
    }
    
    .contact-info {
      background-color: #f8f9fa;
      border-radius: 16rpx;
      padding: 30rpx;
      margin: 40rpx 0;
      
      .contact-text {
        font-size: 28rpx;
        color: #718096;
        display: block;
        margin-bottom: 20rpx;
      }
      
      .phone-number {
        font-size: 40rpx;
        font-weight: 600;
        color: #4a6cf7;
        display: inline-block;
        padding: 16rpx 32rpx;
        border-radius: 12rpx;
        background-color: rgba(74, 108, 247, 0.1);
        transition: all 0.3s ease;
        
        &:active {
          background-color: rgba(74, 108, 247, 0.2);
          transform: scale(0.98);
        }
      }
    }
  }
  
  .footer {
    margin-top: 40rpx;
    
    .beian-text {
      font-size: 28rpx;
      color: #718096;
    }
  }
}
</style>
<style>
	page {
		background-color: #f5f7fa;
	}
</style>